<template>
    <div class="base-topic">
        <div class="title-div">
            <a class="title"
                href="">{{info.title}}</a>
        </div>
        <div class="event">
            <span>{{info.count}}篇剧评·{{info.peopleNum}}次浏览`</span>
            <a href=""><i class="el-icon-edit"></i>写剧评参与</a>
        </div>
        <div class="content">
            <div class="content-1 row">
                <img :src="info.userImg"
                    alt="">
                <a href="">{{info.author}}</a>
                <span>{{info.timeCount}}天前</span>
            </div>
            <p>{{info.content}}</p>
            <div class="evaluation row">
                <span>{{info.useful}}有用</span><span>{{info.response}}回应</span>
            </div>
            <div class="content-bottom">
                <a href="">
                    >更多{{info.more}}篇
                </a>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "base-topic",
    props: {
        info: {
            type: Object,
            required: true
        }
    }
}
</script>

<style lang="less" scoped>
    .base-topic {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        .title-div {
            .title {
                cursor: pointer;
                text-decoration: none;
                color: #37a;
                width: auto;
                &:hover {
                    background: #37a;
                    color: white;
                }
            }
        }
        .event {
            display: flex;
            flex-direction: row;
            padding-bottom: 20px;
            padding-top: 5px;
            span {
                margin-top: 4px;
                display: block;
                font-size: 13px;
                line-height: 16px;
                color: #999999;
            }
            a {
                font-size: 13px;
                text-decoration: none;
                color: #c65e24;
                &:hover {
                    background: #c65e24;
                    color: white;
                }
            }
        }
        .content {
            display: flex;
            flex-direction: column;
            border-left: 2px solid #ededed;
            margin: 0px 0 20px;
            padding-left: 20px;
            .content-1 {
                img {
                    width: 20px;
                }
                a {
                    font-size: 13px;
                    text-decoration: none;
                    color: #37a;
                    margin-right: 8px;
                    padding-left: 8px;
                }
                span {
                    color: #999999;
                    font-size: 13px;
                }
            }
            p {
                font-size: 13px;
                margin: 8px 0;
                line-height: 21px;
                color: #333333;
                display: block;
                word-wrap: break-word;
            }
            .evaluation {
                span {
                    font-size: 13px;
                    line-height: 18px;
                    color: #999999;
                    // padding-left: 10px;
                    margin-right: 10px;
                    margin-bottom: 15px;
                }
            }
            .content-bottom {
                a {
                    color: #37a;
                    text-decoration: none;
                    font-size: 13px;
                }
            }
        }
    }
</style>
